<template>
  <div id="new-project-page">
    <div class="project-root">
      <div class="form-group">
        <label>项目名称</label>
        <teInput
          id="project-name"
          :placeholder="'请输入项目名称 (建议 <mod名> + 汉化)'"
        />
      </div>

      <div class="form-group">
        <label>项目介绍</label>
        <teTextArea :placeholder="'请以简要的语言描述这个项目吧'" />
      </div>

      <!--<teSplit/>-->
      <!--<p>项目语言</p>-->
      <div class="form-group">
        <label>项目语言</label>
        <selectLanguage />
      </div>
      <!--<teSplit/>-->
      <div class="form-group">
        <label>著作授权许可证</label>
        <selectLicense />
      </div>
      <!--<p>著作授权许可证</p>-->
      <!--<selectLicense/>-->
      <div class="form-group">
        <label>汉化mod类型</label>
        <selectGameType />
      </div>
    </div>

    <div class="fileGroup">
      <fileGroupView />
    </div>
  </div>
</template>

<script>
  import teInput        from '../../../components/TeUi/TeInput.vue';
  import teTextArea     from '../../../components/TeUi/TeTextArea.vue';
  import teSplit        from '../../../components/TeUi/TeSplit.vue';
  // import teSelect from "../component/TeSelect";
  // import teCheckGroup from "../component/TeCheckGroup";
  // import teCheckButton from "../component/TeCheckButton";
  import selectLanguage from './newProjectPage/SelectLanguage.vue';
  import selectGameType from './newProjectPage/SelectGameType.vue';
  import selectLicense  from './newProjectPage/SelectLicense.vue';
  import fileGroupView  from './newProjectPage/fileGroupView.vue';

  import projectManger from '../../../script/file/manager';

  export default {
    name: 'newProjectPage',
    data() {
      return {
        project: {}
      };
    },
    components: {
      teInput,
      teTextArea,
      teSplit,
      selectLanguage,
      selectLicense,
      selectGameType,
      fileGroupView
    },
    methods: {
      selectFolder() {
        this.$root.electron.ipcSend('selectFolder', 'projectRoot');
        this.$root.electron.ipcOnce('projectRoot', (e, m) => {
          if (m.filePaths.length == 1) {
            this.projectRootPath = m.filePaths[0];
            console.log(this.projectRootPath);
          }
          e;
        });
      }
    },
    mounted() {
      this.project = projectManger.buildProject();
    }
  };
</script>

<style scoped>
  #new-project-page {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    /*flex-direction: row;*/
  }

  .project-root {
    padding-right: 24px;
    width: 40%;
  }

  .fileGroup {
    width: 60%;
  }

  .form-group {
    position: relative;
  }

  .form-group label {
    display: block;
    color: #fff;
    background: #0065b8;
    padding: 6px 8px;
  }

  .te-input,
  .te-text-area,
  .select-language {
    background: #00acff;
  }
</style>
